<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>图片处理</title>
<link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="//cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<style>
#imgresult{text-align:center}
#imgresult img{width:90%}
</style>
<body>
<!--container-->
<div class="container">
<div class="row">
<h2 class="text-center">h5图片处理</h2>
<div class="col-xs-12">
<a class="btn btn-large btn-primary btn-block" href="blur.html">图片模糊处理</a>

<p>很好的入门教程：
http://www.cnblogs.com/blue-lg/category/343424.html</p>
</div>
</div>
<br><br><br>
<input type='file' name='pic' />

<button onclick='alert($("button").text())'>test</button>
<button onclick='log(this)'>test2</button>
<div id='imgresult'></div>
</div>
<!--/container-->

<script src="//cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
onerror=handleErr
var txt=""

function handleErr(msg,url,l)
{
  txt="本页中存在错误。\n\n"
  txt+="错误：" + msg + "\n"
  txt+="URL: " + url + "\n"
  txt+="行：" + l + "\n\n"
  txt+="点击“确定”继续。\n\n"
  alert(txt)
  return true
}

$(document).ready(function(){
  //log($("input[name='pic']").html()+'hhh');
  $("input[name='pic']").on('change',
  function(){
    log('jjhhj');
    var file = this.files[0];
    log(file.type);
    result = document.getElementById('imgresult');
    var reader = new FileReader(); 
    reader.readAsDataURL(file);	
    reader.onload = function(e){ 	
      result.innerHTML = '<img src="'+this.result+'" alt=""/>'
    }
  });
});
function log(o){
  $('body').append(' '+o.toString());
}

</script>
</body>
</html>